<template>
    <el-container>
        <el-main>
            <el-row :gutter="1">
                <el-col :span="16">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>字典列表</span>
                            <div>
                                <el-form
                                        ref="queryForm"
                                        :model="queryForm"
                                        :inline="true"
                                        label-width="120px"
                                        size="mini">
                                    <el-form-item label="字段含义" prop="fieldNameCn">
                                        <el-input v-model="queryForm.fieldNameCn" autocomplete="off" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="字段名称" prop="fieldName">
                                        <el-input v-model="queryForm.fieldName" autocomplete="off" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="字段值" prop="fieldValue">
                                        <el-input v-model="queryForm.fieldValue" autocomplete="off" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="字段值中文含义" prop="fieldValue">
                                        <el-input v-model="queryForm.fieldValueCn" autocomplete="off" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="字段类型" prop="fieldType">
                                        <dict-select codeName="fieldType"
                                                     :dictValue.sync="queryForm.fieldType"
                                        />
                                    </el-form-item>
                                     <el-form-item>
                                         <el-button-group style="float: right">
                                             <el-button type="primary" size="mini" @click.native="queryDictForm">查询</el-button>
                                             <el-button type="primary" size="mini" @click.native="resetQueryForm">重置查询</el-button>
                                         </el-button-group>
                                    </el-form-item>
                                </el-form>
                            </div>

                        </div>
                        <el-table
                                :data="dictData"
                                style="width: 100%"
                                height="400"
                                highlight-current-row
                                @row-click="onRowClick"
                        >
                            <el-table-column
                                    prop="fieldNameCn"
                                    label="字段含义"
                                    width="180"
                            />
                            <el-table-column
                                    prop="fieldName"
                                    label="字段名称"
                            />
                            <el-table-column
                                    prop="fieldValue"
                                    label="字段值"
                            />
                            <el-table-column
                                    prop="fieldValueCn"
                                    label="字段值中文含义"
                            />
                            <el-table-column
                                    prop="fieldType"
                                    label="字段类型"
                            />
                            <el-table-column
                                    prop="enabled"
                                    label="是否可用"
                            >
                                <template v-slot="scope">
                                    <dict-select codeName="enabled"
                                                     :dictValue.sync="scope.row.enabled"
                                                     :disabled="true"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="200">
                                <template v-slot="scope">
                                    <el-button @click.stop="copyDict(scope.row)"
                                               type="primary"
                                               icon="el-icon-document-copy"
                                               size="mini"
                                               circle/>
                                    <el-button @click="deleteDict(scope.row)"
                                               icon="el-icon-delete-solid"
                                               type="danger"
                                               size="mini" circle/>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页插件-->
                        <div>
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="dictPage.total"
                                    :page-size="dictPage.size"
                                    :current-page.sync="dictPage.current"
                                    @current-change="queryDict"
                            />
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>{{dictTitle}}</span>
                        </div>
                        <el-form
                                ref="dictForm"
                                :model="dictForm"
                                :rules="rules"
                                label-width="120px"
                                size="mini">
                            <el-form-item label="字段含义" prop="id" v-show="false">
                                <el-input v-model="dictForm.id" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="字段含义" prop="fieldNameCn">
                                <el-input v-model="dictForm.fieldNameCn" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="字段名称" prop="fieldName">
                                <el-input v-model="dictForm.fieldName" autocomplete="off" :disabled="!add"></el-input>
                            </el-form-item>
                            <el-form-item label="字段值" prop="fieldValue">
                                <el-input v-model="dictForm.fieldValue" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="字段值中文" prop="fieldValueCn">
                                <el-input v-model="dictForm.fieldValueCn" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="字段类型" prop="fieldType">
                                <dict-select
                                        codeName="fieldType"
                                        :dictValue.sync="dictForm.fieldType"
                                />
                            </el-form-item>
                            <el-form-item
                                    label="是否可用"
                                    prop="enabled"
                                    v-if="!add"
                                    :rules="!add?rules.enabled:[{required: false}]"
                            >
                                <dict-select
                                        codeName="enabled"
                                        :dictValue.sync="dictForm.enabled"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveDict()">保存</el-button>
                                <el-button @click="resetDictForm">重置/新增</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import {listDict,addDict,updateDict,deleteDict} from "@/api/dict";
    import {defaultQueryPage,defaultResultPage} from "@/lib/QueryPageUtil";
    import DictSelect from "@/components/SysDictSelect";

    export default {
        name: "DictManager",
        components:{
          DictSelect
        },
        data(){
            let fieldTypeValidate = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择字段类型'));
                }
                if (this.dictForm.fieldValue === '') {
                    callback(new Error('字段值不能为空'));
                }
                if(value === "Boolean"){
                    if(this.dictForm.fieldValue !== 'false' && this.dictForm.fieldValue !== 'true'){
                        callback(new Error('布尔类型的字段值只能为true或false'));
                    }
                }
                if(value === "Long" || value === "Int"){
                    if(isNaN(this.dictForm.fieldValue)){
                        callback(new Error('数值类型只能输入数字'));
                    }
                }
                callback()
            }
          return {
              // dict列表数据
              dictData:[],
              //翻页数据
              dictPage: defaultQueryPage(),
              //编辑数据
              add:true,
              dictTitle:"字典信息新增",
              //查询表单
              queryForm:{
                  fieldNameCn:"",
                  fieldName:"",
                  fieldValue:"",
                  fieldValueCn:"",
                  fieldType:"",
              },
              //表单
              dictForm:{
                  id:null,
                  fieldNameCn:"",
                  fieldName:"",
                  fieldValue:"",
                  fieldValueCn:"",
                  fieldType:"String",
                  enabled:null,
              },
              rules:{
                  fieldNameCn:[
                      {required: true,message: "不能为空",trigger:"blur"}
                  ],
                  fieldName:[
                      {required: true,message: "不能为空",trigger:"blur"}
                  ],
                  fieldValue:[
                      {required: true,message: "不能为空",trigger:"blur"}
                  ],
                  fieldValueCn:[
                      {required: true,message: "不能为空",trigger:"blur"}
                  ],
                  fieldType:[
                      { validator: fieldTypeValidate, trigger: 'change' }
                  ],
                  enabled:[
                      {required: true,message: "不能为空",trigger:"change"}
                  ],
              }
          }
        },
        mounted(){
            this.queryDict()
        },
        methods:{
            //查询字典信息
            queryDict(){

                listDict(this.dictPage)
                    .then(res =>{
                        this.dictData = [...res.data.records]
                        defaultResultPage(res.data,this.dictPage);
                    }).catch(err =>{
                        this.$message.error(err.message);
                })
            },
            //按条件查询字典信息
            queryDictForm(){
                this.dictPage = defaultQueryPage(this.queryForm)
                this.queryDict();
            },
            //将信息设置到编辑表单
            updateDictForm(data){
                this.add = false
                this.dictForm = {...data}
            },
            //点击行
            onRowClick(row){
                this.resetDictForm();
                this.dictTitle = "字典信息修改"
                this.updateDictForm(row)
            },
            //保存、新增字典
            saveDict(){
                this.$refs.dictForm.validate((valid) =>{
                    if(valid){
                        if(this.add){
                            addDict(this.dictForm)
                                .then(res =>{
                                    this.updateDictForm(res.data)
                                    this.$message.success("新增成功！")
                                    this.queryDict();
                                }).catch(err =>{
                                this.$message.error(err.message)
                            })
                        }else{
                            updateDict(this.dictForm)
                                .then(res =>{
                                    this.$message.success("保存成功！")
                                    this.queryDict();
                                }).catch(err =>{
                                this.$message.error(err.message)
                            })
                        }
                    }
                })

            },
            //重置表单
            resetDictForm(){
                this.dictTitle = "字典信息新增"
                this.$refs.dictForm.resetFields();
                this.add = true;
            },
            //复制信息到新增表单
            copyDict(row){
                if(!this.add){
                    this.$message.error("当前表单正在更新数据，请先进行“重置/新增”操作再复制数据")
                    return;
                }
                this.resetDictForm();
                let data = {
                    fieldNameCn:row.fieldNameCn,
                    fieldName:row.fieldName,
                    fieldType:row.fieldType
                }
                this.dictForm = {...data}
            },
            //重置查询表单
            resetQueryForm(){
                this.$refs.queryForm.resetFields();
                this.dictPage = defaultQueryPage();
                this.queryDict()
            },
            //删除数据
            deleteDict(row){
                let msg = "是否确认删除【"+row.fieldNameCn+"】=【"+row.fieldValueCn+"】"
                let data = {id:row.id,fieldName:row.fieldName}
                this.$confirm(msg)
                    .then(_ =>{
                        deleteDict(data)
                            .then(res =>{
                                this.$message.success("删除成功!")
                                this.queryDict();
                                this.resetDictForm();
                            }).catch(err =>{
                                this.$message.error(err.message)
                        })
                    }).catch(_ =>{

                })
            }
        }
    }
</script>

<style scoped>

</style>